<template>
  <div class="notify-notice">
    <div
      v-if="firstLoading"
      slot="placeholder"
      style="background: #fff; padding: 20px 20px 30px; margin-top: 16px"
    >
      <a-skeleton avatar active />
    </div>
    <div v-else>
      <div
        v-if="!list.length"
        style="padding: 30px 0; background: #fff; margin-top: 16px"
      >
        <a-empty
          description="暂无数据"
          :image="require('~/assets/images/nodata.png')"
        />
      </div>
      <div v-else>
        <div v-for="item in list" :key="item.id" class="notify-modal">
          <div class="left_avatar">
            <HeadAvatar
              :width="32"
              :height="32"
              :img="require('@/assets/images/logo_1.png')"
              :point="item.haveRead === '0'"
            />
          </div>
          <div class="right_text">
            <p class="content" v-html="item.content"></p>
            <p class="time">{{ cycleDate(item.createTime) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import notify from '~/mixin/notify'
export default {
  name: 'NotifyNotice',
  mixins: [notify],
  data () {
    return {
      itemType: '5'
    }
  },
  head () {
    return {
      title: '系统消息-Gimishare'
    }
  }
}
</script>

<style scoped lang="less">
.notify-notice {
  .notify-modal {
    background: #fff;
    margin-top: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    .right_text {
      padding-left: 20px;
      width: 0;
      flex: 1;
      ::v-deep .content {
        a {
          margin: 0 5px;
          &.href_a {
            color: #000;
          }
        }
        .reason {
          color: #999;
          margin-top: 6px;
          span {
            color: #d15656;
          }
        }
        .blue_name {
          color: var(--primary-color);
          margin: 0 4px;
        }
      }
      .time {
        color: #999;
        margin-top: 6px;
      }
    }
  }
}
</style>
